<template>
	<view class="pedding-wrapper">
		<view class="empty-wrapper flex flex-column align-center" v-if="!list.length">
			<view class="empty-icon"></view>
			<text class="desc">暂无挂单</text>
			<router-link to="/pages/market/market" navType="pushTab" class="turn-other">去看看</router-link>
		</view>
		<view class="pedding-list" v-else>
			<view class="pedding-item" v-for="(item,index) in list" :key="item.id" @tap="$emit('peddingItemTap',index)">
					<view class="flex justify-between pedding-item-content">
						<view class="left-wrapper flex flex-column justify-between">
							<text class="name">{{item.ptitle}}</text>
							<view class="price flex align-center">
								<text class="order-price">挂单价格:{{item.newprice}}</text>
								<!-- <text class="time">{{item.buytime|time}}</text> -->
							</view>
							<view class="flex">
								<view class="flex mr-10">
									<text class="label mr-10">止损 :</text>
									<text class="value">{{item.loss}}</text>
								</view>
								<view class="flex">
									<text class="label mr-10">止赢 :</text>
									<text class="value">{{item.surplus}}</text>
								</view>
							</view>
						</view>
						<view class="right-wrapper flex flex-column justify-between">
							<view class="flex justify-end">
								<text class="right-text mr-10">{{item.order_type==0?'买入':'卖出'}}/{{item.onumber}}手</text>
								<text class="right-text">#{{c_key(item.key)}}</text>
							</view>
							<view class="ying-kui" :class="c_color(item)">{{item.order_type==0?item.SP1:item.BP1}}</view>
							<view class="time">{{item.key|time}}</view>
						</view>
					</view>
					
					<view class="flex" v-if="item.expend">
						<router-link class="bottom-btn" :to="{path:'/pages/stockDetail/stockDetail',query:{name:item.ptitle,id:item.order_pid}}">图表</router-link>
						<view class="bottom-btn" @tap="cancelOrder(item)">撤单</view>
						<router-link class="bottom-btn" :to="{path:'/pages/setClose/setClose',query:{info:item,type:2}}">改单</router-link>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		props:{
			list:{
				type:Array,
				required:true
			}
		},
		methods:{
			async cancelOrder(item){
				try{
					await this.$u.api.cancelOrderApi({
						key:item.key,
						order_pid:item.order_pid
					})
					uni.showToast({
						icon:"success",
						title:"撤单成功"
					})
				}catch(e){
					//TODO handle the exception
				}
			},
			c_key(key){
				let stringKey=(key+"")
				return parseInt(stringKey.slice(stringKey.length-6,stringKey.length))
			},
			c_color(item){
				if(item.order_type==0){
					if(item.SP1_UP){
						return 'up-color'
					}
					else{
						return "down-color"
					}
				}
				else{
					if(item.BP1_UP){
						return 'up-color'
					}
					else{
						return "down-color"
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pedding-wrapper{
		.desc{
			margin-top: 18rpx;
			font-weight: 500;
			color: #333333;
		}
		.turn-other{
			margin-top: 20rpx;
			width: 188rpx;
			height: 72rpx;
			background: #3D7FFF;
			border-radius: 36rpx;
			font-size: 28rpx;
			text-align: center;
			color: #FFFFFF;
			line-height: 72rpx;
			text-align: center;
		}
		.pedding-list{
			.pedding-item{
				padding:10rpx 20rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #F0F8FF;
				.pedding-item-content{
					min-height: 120rpx;
				}
				.left-wrapper{
					.name{
						font-size: 28rpx;
					}
					.order-price{
						margin-right: 10rpx;
						font-size: 24rpx;
						font-weight: bold;
					}
					.now-price{
						font-size: 24rpx;
						font-weight: bold;
					}
					.label{
						font-size: 20rpx;
						color: #999;
					}
					.value{
						font-size: 20rpx;
						color: #999;
					}
					
				}
				.right-wrapper{
					.right-text{
						font-size: 20rpx;
						color: #333;
					}
					.ying-kui{
						font-size: 28rpx;
						text-align: right;
					}
					.time{
						font-size: 20rpx;
						color: #999;
						text-align: right;
					}
				}
				.mr-10{
					margin-right: 10rpx;
				}
				.bottom-btn{
					flex:1;
					background-color: $color-blue;
					font-size: 24rpx;
					text-align: center;
					color: #fff;
					line-height: 54rpx;
					border-radius: 10rpx;
					margin: 10rpx;
				}
			}
		}
	}
</style>
